<template>
    <div class="paddB60" style="margin: 5px auto;width: 1000px;">
        <div class="workflowTitle">{{applyData.workflow_title}}</div>
        <div class="workflowContent">
            <span style="display: inline-block;width: 500px;"><span style="display: inline-block;width: 75px;">申请日期:</span>{{applyData.create_time}}</span>
            <span style="display: inline-block;width: 495px;"><span style="display: inline-block;width: 75px;">流程编号:</span>{{applyData.workflow_no}}</span>
        </div>
        <div class="workflowContent">
            <span style="display: inline-block;width: 500px;"><span style="display: inline-block;width: 75px;">申请人:</span>{{applyData.user_name}}</span>
            <span style="display: inline-block;width: 495px;"><span style="display: inline-block;width: 75px;">所属部门:</span>{{applyData.department}}</span>
        </div>
        <div class="workflowContent">备注:
            <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="备注"
                    :disabled="applyData.state != 0"
                    v-model="applyData.remarks">
            </el-input>
        </div>
        <el-table :data="applyData.details"
                  style="width: 100%"
                  :header-cell-style="headRowStyle"
                  border
                  size="small">
            <el-table-column
                    prop="materiel_name"
                    align="center"
                    show-overflow-tooltip
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="type.fullType"
                    align="center"
                    show-overflow-tooltip
                    label="类别">
            </el-table-column>
            <el-table-column
                    prop="materiel_no"
                    align="center"
                    show-overflow-tooltip
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="materiel_spec"
                    align="center"
                    show-overflow-tooltip
                    label="规格">
            </el-table-column>
            <el-table-column
                    prop="materiel_brand"
                    align="center"
                    show-overflow-tooltip
                    label="品牌">
            </el-table-column>
            <el-table-column
                    prop="materiel_unit"
                    align="center"
                    show-overflow-tooltip
                    label="单位">
            </el-table-column>
            <el-table-column
                    prop="materiel_number"
                    align="center"
                    show-overflow-tooltip
                    label="数量">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.materiel_number" :min="1" label="物料数量" size="small" :disabled="applyData.state != 0"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="applyData.messages.length > 0" class="workflowOpinion" v-for="item of applyData.messages">
            <span>审批人: {{item.user_id}}</span>
            <span>意见: {{item.opinion}}</span>
            <span>审批时间: {{item.apply_time}}</span>
            <div>
                备注:
                <div>{{item.remarks}}</div>
            </div>
        </div>
        <div style="margin-top: 15px;text-align: right;">
            <e-button v-if="applyData.state == 0" class="operatBtnMiddle" @click="delApplyMateriel">删除</e-button>
            <e-button class="operatBtnMiddle" @click="">提交</e-button>
        </div>
    </div>
</template>
<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    export default {
        data(){
            return{
                applyData: [],
            }
        },
        methods:{
            delApplyMateriel:function(){
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.id = this.applyData.id;
                    this.apiPost('admin/ApplyMateriel/del',data).then(res=>{
                        if (typeof res == "string"){
                            res = JSON.parse(res);
                        }
                        if (res.code == 200){
                            _g.toastMsg('success',res.message);
                            //返回上一页
                            this.$router.go(-1);
                        } else{
                            _g.toastMsg('error',res.message);
                        }
                    });
                }).catch(()=>{});
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;';
            },
            /* 获取流程详细信息 */
            getApplyMaterielDetail:function () {
                let id = this.$route.query.id;
                let data = {};
                data.id = id;
                this.apiPost('admin/ApplyMateriel/getApplyDetail',data).then(res=>{
                    if (res.code == 200){
                        this.applyData = res.data;
                    } else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
        },
        mounted:function () {
            this.getApplyMaterielDetail();
        },
        mixins: [http]
    }
</script>

<style scoped>
    .workflowTitle{
        text-align: center;
        font-size: 22px;
        margin: 20px 0;
    }
    .workflowContent{
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .workflowOpinion{
        width: 998px;
        height: 150px;
        border: 1px solid #e2e2e2;
    }
    .workflowOpinion span{
        display: inline-block;
        width: 333px;
        height: 30px;
        border: 1px solid #e2e2e2;
    }
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
</style>